var path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  // entry: './src/index.js',
  // output: {
  //   //设置产品的输出;
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js'
  // }
  //plugins插件;
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.html'),
      filename: 'index.html'
    })
  ],
  //module模块;
  module: {
    //rules规则;
    rules: [{
        //引用css;
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        //引用less;
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        //引用scss;
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        //图片处理格式化;
        //limit 给定的值，是图片的大小，单位是 byte， 
        //如果我们引用的 图片，大于或等于给定的limit值， 
        //则不会被转为base64格式的字符串， 
        //如果图片小于给定的limit值，则会被转为 base64的字符串
        //name给图片设置名字[name]为原来的名字[ext]为扩展名
        //[hash]32位的哈希值-->[hash: 8]哈希的前8位
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: 'url-loader?limit=10000&name=[hash:8]-[name].[ext]'
      },
      {
        //引用外部的文字各式,外部图标
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: ['url-loader']
      },
      //babel  将es6 es7的语法转换为浏览器识别的版本
      {
        test: /\.js|jsx$/,
        use: 'babel-loader',
        // exclude: /node_modules/
      }
    ]
  },
  //resolve-->解决   extensions-->扩展
  resolve: {
    //默认的情况下的 识别的后缀名是.js  .json
    extensions: [
      '.js', '.jsx', '.json'
    ],
    //alias  别名;
    alias: {
      '@': path.join(__dirname, './src/components')
    }
  }
}